
<template>
  <div v-html="currentItem.field_value" :style="textStyle" v-if="currentItem.type == 'text'"></div>

  <div class="line_box" :style="textStyle" v-else-if="currentItem.type == 'text_line'"
       style="    vertical-align: bottom;">
    {{ currentItem.field_value }}
  </div>


  <div v-else-if="currentItem.type == 'input'" :style="textStyle">
    <div v-if="pdf == 1" :style="textStyle" class="input_show">
      {{ currentItem.field_value }}
    </div>
    <el-input v-else type="text" v-model="currentItem.field_value" :style="textStyle" @focus="focusInput"></el-input>

  </div>

  <div v-else-if="currentItem.type == 'textarea'" :style="textStyle">
    <div v-if="pdf == 1" :style="textStyle" class="input_show">
      {{ currentItem.field_value }}
    </div>
    <el-input v-else type="textarea" autosize v-model="currentItem.field_value" :style="textStyle"></el-input>

  </div>

  <el-checkbox-group v-else-if="currentItem.type == 'checkbox'" v-model="currentItem.field_value" :style="textStyle">
    <el-checkbox v-for="info in currentItem.field_options" :label="info.dm" :key="info.dm" :style="textStyle">
      <span class="line_b">
        {{ info.mc }}
      </span>
    </el-checkbox>
  </el-checkbox-group>



  <el-radio-group v-else-if="currentItem.type == 'radio'" v-model="currentItem.field_value" :style="textStyle">
    <el-radio v-for="info in currentItem.field_options" :label="info.dm" :key="info.dm"> {{ info.mc }}</el-radio>
  </el-radio-group>


  <v-sign v-else-if="currentItem.type == 'sign'" :title="currentItem.label" :info="currentItem.field_value"
          :type="currentItem.field_value.sign_identity" @signBack="signBack" :style="textStyle"></v-sign>

  <v-sign2 v-else-if="currentItem.type == 'sign2'" :info="currentItem" :style="textStyle"></v-sign2>

  <v-sign3 v-else-if="currentItem.type == 'sign3'" :info="currentItem" :style="textStyle" :pdf="pdf"
           :TPL_FORMAT="TPL_FORMAT"></v-sign3>
  <v-sign4 v-else-if="currentItem.type == 'sign4'" :info="currentItem" :style="textStyle" :TPL_FORMAT="TPL_FORMAT" :pdf="pdf"
  ></v-sign4>

  <v-datetime v-else-if="currentItem.type == 'dateTime'" :info="currentItem" :style="textStyle" :pdf="pdf"></v-datetime>



  <div v-else-if="currentItem.type == 'select'" :style="textStyle">
    <div class="flex-r wp100">
      <span>{{ currentItem.label }}</span>
      <div v-if="pdf == 1" class="input_show flex1">
        <span v-for="item in currentItem.field_options" :key="item.dm" v-if="currentItem.field_value==item.dm">{{ item.mc }}</span>
      </div>
      <div class="relative line_box flex1 text-l" v-else>
        <el-select class="cos-select wp100" v-model="currentItem.field_value" clearable placeholder="">
          <el-option v-for="info in currentItem.field_options" :label="info.mc" :value="info.dm" :key="info.dm">
          </el-option>
        </el-select>
      </div>
    </div>
  </div>

  <v-table-custom v-else-if="currentItem.type == 'table'" :style="textStyle" :info="currentItem"
                  :pdf="pdf"></v-table-custom>

  <v-mzmz-pgb v-else-if="currentItem.type == 'MZMZ_PGB'" :style="textStyle" :info="currentItem" :pdf="pdf"
              :type="type"></v-mzmz-pgb>



  <div v-else-if="currentItem.type == 'line'" :style="textStyle" class="line-components"></div>
  <div v-else-if="currentItem.type == 'td'" :style="textStyle" class="td-custom-box">
    {{ currentItem.field_value }}
  </div>
  <div v-else-if="currentItem.type == 'border'" :style="textStyle" class="border-components">
    <div class="border-components-left border-components-inner">

    </div>
    <div class="border-components-right border-components-inner">

    </div>
    <div class="border-components-top border-components-inner">

    </div>
    <div class="border-components-bottom border-components-inner">

    </div>
  </div>
</template>

<script>
import Sign from 'MODULES/CST/components/Sign'
import Sign2 from 'MODULES/CST/components/Sign2'
import Sign3 from 'MODULES/CST/components/Sign3'
import DateTime from 'MODULES/CST/components/DateTime'
import TableCustom from 'MODULES/CST/components/TableCustom'
import MZMZ_PGB from 'MODULES/CST/components/MZMZ_PGB'
import Sign4 from 'MODULES/CST/components/Sign4'


export default {
  name: "DraggableItem",
  components: {
    'v-sign': Sign,
    'v-sign2': Sign2,
    'v-sign3': Sign3,
    'v-sign4': Sign4,
    'v-datetime': DateTime,
    'v-table-custom': TableCustom,
    'v-mzmz-pgb': MZMZ_PGB
  },
  props: {
    currentItem: {
      required: true,
    },
    TPL_FORMAT: {
    },
    pdf: {//如果等于1 表示返回给后端生成pdf使用的

    },
    type: { //1新增 2修改

    }
  },
  computed: {
    textStyle() {
      let obj = {};
      if (this.currentItem.field_width) {
        obj.width = this.currentItem.field_width;
      }
      if (this.currentItem.field_height) {
        obj.height = this.currentItem.field_height;
      }
      if (this.currentItem.field_text_align) {
        obj.textAlign = this.currentItem.field_text_align;
      }
      if (this.currentItem.field_font_size) {
        obj.fontSize = this.currentItem.field_font_size;
      }
      if (this.currentItem.field_margin) {
        obj.margin = this.currentItem.field_margin;
      }
      if (this.currentItem.field_display) {
        obj.display = this.currentItem.field_display;
      }
      if (this.currentItem.field_font_weight) {
        obj.fontWeight = this.currentItem.field_font_weight;
      }
      if (this.currentItem.field_text_indent) {
        obj.textIndent = this.currentItem.field_text_indent;
      }

      if (this.currentItem.field_top) {
        obj.top = this.currentItem.field_top;
      }
      if (this.currentItem.field_left) {
        obj.left = this.currentItem.field_left;
      }
      if (this.currentItem.field_index) {
        obj.zIndex = this.currentItem.field_index;
      }
      if (this.currentItem.field_color) {
        obj.color = this.currentItem.field_color;
      }

      if (this.currentItem.field_background) {
        obj.background = this.currentItem.field_background;
      }



      return obj;
    },
  },
  data() {
    return {
      info: "",
    };
  },
  created() { },
  methods: {
    signBack(obj) {
      console.log("签名组件1回调", obj)
      this.currentItem.field_value.sign_img = obj.signImg
      this.currentItem.field_value.sign_relation = obj.relation;
      this.currentItem.field_value.sign_time = obj.signDate;
    },
    focusInput(event) {
      if (this.currentItem.field_relate_names && this.currentItem.field_relate_formula) {
        let name_arr = this.currentItem.field_relate_names.split(",");
        let obj = [];//按照顺序存储值
        if (this.TPL_FORMAT) {
          name_arr.forEach(inner => {
            let inner_value = '';
            this.TPL_FORMAT.forEach((item) => {
              if (item.field_name == inner) {
                inner_value = item.field_value;
              }
            })
            obj.push(inner_value);
          })
          if (this.currentItem.field_relate_formula == "BMI") { //计算BMI
            let _value = this.calculateBMI(obj[0], obj[1]);
            this.currentItem.field_value = _value;
          }
        }

      }
    },
    calculateBMI(weight, height) {
      if (weight === "" || height === "") {
        return "";
      }
      console.log(weight, height)
      const bmi = weight / Math.pow(height / 100, 2);
      return Math.round(bmi * 100) / 100;  // 保留两位小数
    }

  },
};
</script>
<style  lang="less" >
.line-components {
  background: #000;
}

.cos-select {
  .el-input__inner {
    border: none !important;
    font-size: 14px;
    background: none;
  }

  .el-input__suffix {
    display: none;
  }

}

.td-custom-box {
  border: 1px solid #000;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
}

.border-components {
  position: absolute;
  // border: 1px solid #000;
  left: 0px;
  top: 0px;
  box-sizing: border-box;
  z-index: 1;
  background: transparent;
  pointer-events: none;

  .border-components-inner {
    position: absolute;
    background: #000;
    pointer-events: auto;
  }

  .border-components-left {
    height: 100%;
    width: 1px;
    left: 0px;
    top: 0px;
  }

  .border-components-right {
    height: 100%;
    width: 1px;
    right: 0px;
    top: 0px;
  }

  .border-components-top {
    height: 1px;
    width: 100%;
    left: 0px;
    top: 0px;
  }

  .border-components-bottom {
    height: 1px;
    width: 100%;
    left: 0px;
    bottom: 0px;
  }

}
</style>
